<template>
  <div class="custom-table-list-wrapper">
    <div class="search" :class="{ active: toggleSearchStatus }">
      <div class="search-left" ref="searchFromRef">
        <el-form class="search-form" inline>
          <el-form-item label="所在园区">
            <el-select
              class="search-select"
              v-model="searchParams.areaId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of parkOptions"
                :key="index"
                :label="item.name"
                :value="item.pkid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="检查场景">
            <el-select
              class="search-select"
              v-model="searchParams.senceId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) of dict['inspection_inspection_scene']"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.keyword"
              placeholder="请输入检查点名称、检查点编号"
              :suffix-icon="Search"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <a
          class="search-left-toggle"
          v-if="showToggle"
          @click="handleToggleSearch"
        >
          <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
          {{ toggleSearchStatus ? '收起' : '展开' }}
        </a>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="initTableList(1)"
          ><svg-icon name="search" size="14px" />搜索</el-button
        >
        <el-button @click="handleReset()"
          ><svg-icon name="reset" size="17px" />重置</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content-operate">
        <el-button type="primary" @click="handleAdd('新增检查点')"
          ><svg-icon name="add" size="15px" />新增</el-button
        >
      </div>
      <div class="content-table">
        <el-table class="custom-table" :data="tableData">
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="code" label="检查点编号" />
          <el-table-column prop="name" label="检查点名称" />
          <el-table-column prop="senceName" label="检查场景" />
          <el-table-column prop="address" label="地理位置" />
          <el-table-column prop="areaName" label="所属园区" />
          <el-table-column prop="qrContentBase64" label="二维码">
            <template #default="scope">
              <el-image
                class="qr-code-img"
                :src="'data:image/png;base64,' + scope.row.qrContentBase64"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[
                  'data:image/png;base64,' + scope.row.qrContentBase64,
                ]"
                :initial-index="0"
                fit="cover"
                :preview-teleported="true"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="park" label="关联检查表数">
            <template #default="scope">
              {{ scope.row.tableIds.length }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="park" label="检查次数" /> -->
          <el-table-column prop="enabled" label="是否启用" width="100">
            <template #default="scope">
              <el-switch
                :active-value="'1'"
                :inactive-value="'0'"
                v-model="scope.row.enabled"
                :before-change="handleChangeStatus.bind(this, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleEdit(scope.row, '编辑检查点')"
                >编辑</el-button
              >
              <el-button link type="danger" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
    <AddDialog ref="addRef" :detail="currentDetail" @close="handleClose" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import AddDialog from './add.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import qrCode from '@/assets/imgs/manager/qrCode.png'
import {
  addCheckPoint,
  getCheckPointList,
  getCheckPointDetail,
  updateCheckPoint,
  deleteCheckPoint,
} from '@/api/manager/inspectionManage/checkPointManage.js'
import { parkPageList } from '@/api/manager/dataManage/park'
import { useDict } from '@/hooks/useDict'

const { dict } = useDict(['inspection_inspection_scene'])
const searchParams = ref({
  areaId: '',
  senceId: '',
  keyword: '',
})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getCheckPointList, deleteCheckPoint)

const parkOptions = ref([])
const initParkOptions = async () => {
  const res = await parkPageList({ pageIndex: 1, pageSize: 9999, enable: '1' })
  parkOptions.value = res.data.list
}

const handleChangeStatus = async (row) => {
  return new Promise((resolve) => {
    ElMessageBox.confirm(`是否切换启用状态`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        const res = await updateCheckPoint({
          ...row,
          enabled: row.enabled === '1' ? '0' : '1',
        })
        if (res.success) {
          ElMessage.success('切换成功')
          resolve(true)
        } else {
          ElMessage.error(res.message)
          resolve(false)
        }
      })
      .catch(() => {
        resolve(false)
      })
  })
}

onMounted(() => {
  initParkOptions()
  initTableList(1)
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/table.scss';

.content {
  .content-operate {
    display: flex;
    justify-content: flex-start;
  }
}

:deep(.el-image-viewer__wrapper) {
  .el-image-viewer__img {
    width: 300px;
    height: 300px;
  }
}

.qr-code-img {
  width: 40px;
  height: 40px;
}

.state {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;

  &.success {
    color: #00a870;
    background-color: #e6ffed;
  }

  &.warning {
    color: #e6a23c;
    background-color: #fdf6ec;
  }
}
</style>
